<template>
  <div class="tw:p-4 tw:space-y-10 tw:max-w-[500px] tw:mx-auto">
    <h2 class="tw:text-2xl tw:font-bold tw:mb-6">Tailwind Overflow 类对比示例</h2>

    <div v-for="item in examples" :key="item.name">
      <h3 class="tw:mb-2 tw:font-semibold">
        {{ item.name }} (<code>{{ item.class }}</code>)
      </h3>
      <div
        :class="[
          'tw:border tw:border-gray-400 tw:bg-gray-50 tw:p-2',
          item.isY ? 'tw:w-48 tw:h-20' : 'tw:w-48 tw:h-24',
          item.class,
        ]"
      >
        <div
          :class="[
            'tw:bg-gradient-to-r tw:from-pink-500 tw:to-yellow-500 tw:text-white tw:whitespace-nowrap tw:flex tw:items-center tw:justify-center',
            item.isY ? 'tw:h-[80px] tw:w-full' : 'tw:w-[300px] tw:h-full',
          ]"
        >
          这是超出容器尺寸的示例内容
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface 溢出示例 {
  name: string
  class: string
  isY: boolean
}
const examples: 溢出示例[] = [
  { name: 'overflow-auto', class: 'tw:overflow-auto', isY: false },
  { name: 'overflow-hidden', class: 'tw:overflow-hidden', isY: false },
  { name: 'overflow-clip', class: 'tw:overflow-clip', isY: false },
  { name: 'overflow-visible', class: 'tw:overflow-visible', isY: false },
  { name: 'overflow-scroll', class: 'tw:overflow-scroll', isY: false },

  { name: 'overflow-x-auto', class: 'tw:overflow-x-auto', isY: false },
  { name: 'overflow-y-auto', class: 'tw:overflow-y-auto', isY: true },

  { name: 'overflow-x-hidden', class: 'tw:overflow-x-hidden', isY: false },
  { name: 'overflow-y-hidden', class: 'tw:overflow-y-hidden', isY: true },

  { name: 'overflow-x-clip', class: 'tw:overflow-x-clip', isY: false },
  { name: 'overflow-y-clip', class: 'tw:overflow-y-clip', isY: true },

  { name: 'overflow-x-visible', class: 'tw:overflow-x-visible', isY: false },
  { name: 'overflow-y-visible', class: 'tw:overflow-y-visible', isY: true },

  { name: 'overflow-x-scroll', class: 'tw:overflow-x-scroll', isY: false },
  { name: 'overflow-y-scroll', class: 'tw:overflow-y-scroll', isY: true },
]
</script>
